<!DOCTYPE html>
<html>
<head>
    <meta charset='UTF-8'>
    <title>杜旭民</title>
</head>
<style>
    .classifys .active{
        color: #f00;
    }
    table{
        border: none;
        border-color: #f00;
    }
</style>
<body>
<div class="wrap" style="width: 700px;min-height: 700px;border: 1px solid;margin: 0px auto;padding:10px 5px 5px;">
    <form action="javaScript:;">
        商品名称：<input type="text" class="username"><br><br>
        商品类别：<select class="classify">
            <option>优选水果</option>
            <option>卤味熟食</option>
            <option>饮料酒水</option>
            <option>休闲零食</option>
            </select><br><br>
        商品原价：<input type="text" class="oldpic"><br><br>
        商品现价：<input type="text" class="newpic"><br><br>
        库存数量：<input type="text" class="num"><br><br>
        是否标红：<input type="radio" name="radio" checked>是
            <input type="radio" name="radio">否<br><br>
        <input type="submit" value="提交信息"><br><br>
    </form>
    <hr>
    <div class="classifys">
        <a href="javascript:;" class="all active">全部</a>
        <a href="javascript:;" class="one">优选水果</a>
        <a href="javascript:;" class="one">卤味熟食</a>
        <a href="javascript:;" class="one">饮料酒水</a>
        <a href="javascript:;" class="one">休闲零食</a>
    </div>
    <hr>
    <table border="1">
        <thead>
            <tr>
                <th width="100px">商品名称</th>
                <th width="100px">商品类别</th>
                <th width="100px">原价</th>
                <th width="100px">现价</th>
                <th width="100px">库存</th>
                <th width="100px">是否标红</th>
                <th width="100px">删除</th>
            </tr>
        </thead>
        <tbody  align="center">
            <!-- <tr>
                <td>仰头</td>
                <td>卤味熟食</td>
                <td><del>￥32.00</del></td>
                <td>￥23.00</td>
                <td>库存</td>
                <td>是否标红</td>
                <td>删除</td>
            </tr> -->
        </tbody>

    </table>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script>
// 给商品类别绑定点击事件，点击后字体颜色变为红色
$(".classifys a").click(function(){
    $(".classifys a").css("color","blue")
    $(this).css("color","red")
})

var brr=[]
$('[type="submit"]').click(function(){
    //判断表单各项不允许为空
    if($('.username').val()==""){
        alert("商品名称必填");
        return false;
    }
    if($('.oldpic').val()==""){
        alert("原价必填");
        return false;
    }
    var reg=/^\d*$/;
    if(!reg.test($('.oldpic').val())){
        alert("原价必须输入数字");
        return false;
    }
    if($('.newpic').val()==""){
        alert("现价必填");
        return false;
    }
    var reg=/^\d*$/;
    if(!reg.test($('.newpic').val())){
        alert("现价必须输入数字");
        return false;
    }
    if($(".num").val()==""){
        alert("库存必填");
        return false;
    }
    var reg=/^\d*$/;
    if(!reg.test($(".num").val())){
        alert("库存必须输入数字");
        return false;
    }
    //获取输入的数据，将获取的数据存放到obj中
    var obj={};
    obj.name=$(".username").val();
    obj.select=$("select").val();
    obj.oldprice=$(".oldpic").val()-0;
    obj.newprice=$(".newpic").val()-0;
    obj.num=$(".num").val()-0;
    console.log(obj);
    if($("[name='radio']").prop("checked")){
        obj.yes="true"
    }else{
        obj.yes="false"
    };
    // 获取本地存储
    var local=localStorage.getItem("date")
    local=JSON.parse(local)
    if(local){  //有值
        // 显示在表格的最上面
        local.unshift(obj)
        localStorage.setItem("date",JSON.stringify(local))
    }else{   //没有值
        // 存到本地存储
        brr.unshift(obj)
        localStorage.setItem("date",JSON.stringify(brr))
    }
    console.log(local);
    // 点击提交，将输入框的内容清空
    $(".username").val("");
    $(".oldpic").val("");
    $(".newpic").val("");
    $(".num").val("");
    // 获取本地存储，加载页面
    var arr=localStorage.getItem("date")
    arr=JSON.parse(arr)
    if(arr){
        var str=""
        var td=""
        for(let i=0;i<arr.length;i++){
            if(arr[i].yes=="true"){
                td=' style="color:red"'
            }else{
                td=""
            }
            str+=`
                <tr>
                    <td name="name"${td}>${arr[i].name}</td>
                    <td>${arr[i].select}</td>
                    <td><del>￥<span>${arr[i].oldprice}</span></del></td>
                    <td>￥<span>${arr[i].newprice}</span></td>
                    <td>${arr[i].num}</td>
                    <td>${arr[i].yes}</td>
                    <td class="del">删除</td>
                </tr>
            `
        }
        $("tbody").html(str)
        click()
    }
    // 表格的偶数行--背景色红色
    $("tbody tr:odd").each(function(i,v){
        $(v).css("background","#666");
    });
    return false;
})
// 刷新页面，表格中的数据是从本地存储获取的
// 获取本地存储
var drr=localStorage.getItem("data");
drr=JSON.parse(drr);
if(drr){
    var str=""
    var td=""
    for(let i=0;i<drr.length;i++){
        if(drr[i].yes=="true"){
                td=' style="color:red"'
        }else{
            td=""
        }
        str+=`
            <tr>
                <td name="name"${td}>${drr[i].name}</td>
                <td>${drr[i].select}</td>
                <td><del>￥<span>${drr[i].oldprice}</span></del></td>
                <td>￥<span>${drr[i].newprice}</span></td>
                <td>${drr[i].num}</td>
                <td>${drr[i].yes}</td>
                <td class="del">删除</td>
            </tr>
        `
    }
    $("tbody").html(str);
    click()
}
// 点击分类，表格显示相对应的内容
// 利用事件委托
$(".classifys").on("click","a",function(e){
    var target=e.target;
    // 颜色变为红色，其他的兄弟元素无背景颜色
    $(target).addClass("active").siblings().removeClass("active");
    var target= target.innerText;
    // 获取本地存储
    var crr= localStorage.getItem("data");
    crr=JSON.parse(crr);
    // 点击的如果是全部
    if(target=="全部"){
        var fruits=crr;
        var td=""
        var html="";
        for(let i=0;i<fruits.length;i++){
            //    如果选择了标红
            if(fruits[i].yes=="true"){
                td=' style="color:red"'
            }else{
                td=""
            }
            html+=`
                <tr>
                    <td name="name"${td}>${fruits[i].name}</td>
                    <td>${fruits[i].select}</td>
                    <td><del>￥<span>${fruits[i].oldprice}</span></del></td>
                    <td>￥<span>${fruits[i].newprice}</span></td>
                    <td>${fruits[i].num}</td>
                    <td>${fruits[i].yes}</td>
                    <td class="del">删除</td>
                </tr>
            `
        };
        $("tbody").html(html);
        click()
        // 选中表格的偶数行--背景色红色
        $("tbody tr:odd").each(function(i,v){
            $(v).css("background","#666");
        });
        return false;
    }
    // 点击的如果是其他分类
    if(target=="优选水果"){  //如果是优选水果
        // 把数组中是优选水果的都筛选出来
        var fruits= crr.filter(function(v){
            return v.select=="优选水果";
        });
    }else if(target=="卤味熟食"){  //如果是卤味熟食
        var fruits= crr.filter(function(v){
            return v.select=="卤味熟食";
        });
    }else if(target=="饮料酒水"){   //如果是饮料酒水
        var fruits= crr.filter(function(v){
            return v.select=="饮料酒水";
        });
    }else if(target=="休闲零食"){  //如果是休闲零食
        var fruits= crr.filter(function(v){
            return v.select=="休闲零食";
        });
    }
    // 遍历放到表格中
    // 优选水果，卤味熟食，饮料酒水，休闲零食最多7条数据
    var html="";
    var k=0;
    for(let i=0;i<fruits.length;i++){
        k++;
        if(k<8){
            // 如果选择了标红
            var td=""
            if(fruits[i].yes=="true"){
                td=' style="color:red"'
            }else{
                td=""
            }
            html+=`
                <tr>
                    <td name="name"${td}>${fruits[i].name}</td>
                    <td>${fruits[i].select}</td>
                    <td><del>￥<span>${fruits[i].oldprice}</span></del></td>
                    <td>￥<span>${fruits[i].newprice}</span></td>
                    <td>${fruits[i].num}</td>
                    <td>${fruits[i].yes}</td>
                    <td class="del">删除</td>
                </tr>
            `  
        }
    };
    $("tbody").html(html);
    click()
    // 表格的偶数行--背景色红色
    $("tbody tr:odd").each(function(i,v){
        $(v).css("background","#666");
    });
})
// 表格的偶数行--背景色红色
$("tbody tr:odd").each(function(i,v){
    $(v).css("background","#666");
});
// 点击删除
function click(){
    $("tbody tr td:last-child").click(function(){
        $(this).parent().remove();
        var text=$(this).parent().find("[name='name']").text();
        // 获取本地存储
        var arr=localStorage.getItem("data");
        arr=JSON.parse(arr);
        // 找到当前满足条件的元素
        var c=arr.find(function(v){
            return v.name==text;
        });
        // 查找该元素在数组中的下标
        var d=arr.indexOf(c);
        // 删除
        arr.splice(d,1);
        // 重新存到本地存储
        localStorage.setItem("data",JSON.stringify(arr));
    })
}
</script>
</html>